<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link href="./static/bootstrap/css/bootstrap.css"
          rel="stylesheet" type="text/css"/>
    <script type="text/javascript"
            src="./static/bootstrap/js/bootstrap.js">
    </script>
    <link rel="stylesheet" href="Js_Css/HotelReviewsStyles.css">
    <script type="text/javascript" src="Js_Css/HotelReviewsJs.js"></script>
    <script src="./statics/js/order-management.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            min-height: 100vh;
            font-family: Arial, sans-serif;
        }

        .sidebar {
            width: 200px;
            background-color: #2D3139;
            color: white;
            padding: 20px 0;
        }

        .logo {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo img {
            height: 30px;
        }

        .nav-item {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #888;
            text-decoration: none;
            transition: background-color 0.3s;
            background-color: transparent;
        }

        .nav-item.active {
            background-color: #FFB800;
            color: white;
        }

        .nav-item:hover {
            background-color: #363B44;
        }

        .main-content {
            flex: 1;
            background-color: #F5F5F5;
        }

        .header {
            background-color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logout-icon {
            cursor: pointer;
            color: #666;
        }

        /* 订单页面样式 */
        .order-tabs {
            margin: 20px 0;
            padding: 10px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .tab-btn {
            padding: 8px 16px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s;
        }

        .tab-btn.active {
            background: #007bff;
            color: white;
        }

        .order-content {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .order-content table td {
            vertical-align: middle;
        }

        .order-content table td:nth-child(5) {
            font-weight: bold;
        }

        .btn-operate {
            padding: 5px 10px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-danger {
            background: #dc3545;
            color: white;
        }

        /* 状态文本样式 */
        .text-warning {
            color: #ffc107 !important;
        }

        .text-success {
            color: #28a745 !important;
        }

        .text-danger {
            color: #dc3545 !important;
        }
    </style>
    <script>
        function setActiveNavItem(element) {
            // 移除所有导航项的 active 类
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            // 为被点击的导航项添加 active 类
            element.classList.add('active');
            // 更新标题
            document.querySelector('.header h1').textContent = element.querySelector('span').textContent;
            // 获取页面ID
            const pageId = element.id;
            // 加载对应的页面内容
            loadPageContent(pageId);
        }

        function loadPageContent(pageId) {
            let content = '';
            switch (pageId) {
                case 'userManagement':
                    content = `

        `;

                    break;
                case 'forum':
                    content = `
                   <!-- 评论表格 -->
<div class="container" id="reviewManagementContent">
    <h2>用户评论管理</h2>
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>用户名</th>
            <th>评价</th>
            <th>评论</th>
            <th>图片</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${commentsList}" var="comment">
            <tr>
                <td>${comment.username}</td>
                <td>
                      ${comment.rating}
                </td>
                <td>${comment.comment}</td>
                <td>
                    <img src="${comment.image}" alt="评论图片" style="max-width: 100px; max-height: 100px;">
                </td>
                <td><button>删除</button>
            </tr>
        </c:forEach>
        </tbody>
    </table> -
     <!-- 分页导航 -->
     <div id="pagination">
    <c:if test="${currentPage > 1}">
      <button class="pagination-button" data-pageno="${currentNo - 1}" onclick="change(${currentNo - 1})">上一页</button>
    </c:if>
    <c:forEach var="i" begin="1" end="${currentPage}">
      <c:choose>
        <c:when test="${i == currentNo}">
          <span>${i}</span>
        </c:when>
        <c:otherwise>
          <button class="pagination-button" data-pageno="${i}">${i}</button>
        </c:otherwise>
      </c:choose>
    </c:forEach>
    <c:if test="${currentNo < currentPage}">
      <button class="pagination-button" data-pageno="${currentNo + 1}" onclick="chang(${currentNo + 1})">下一页</button>
    </c:if>
  </div>
</div>
                    `;
                    break;
                case 'attractionManagement':
                    content = `
                        <p>这里是景点管理的内容。</p>
                    `;
                    break;
                case 'hotelManagement':
                    content = `

                        <p>这里是酒店管理的内容。</p>
                    `;
                    break;
                case 'ticketManagement':
                    content = `

                        <p>这里是车票管理的内容。</p>
                    `;
                    break;
                case 'orderManagement':
                    content = `
    <div class="container" id="orderManagementContent">
        <!-- 订单标签栏 -->
        <div class="order-tabs">
            <button class="tab-btn active" data-type="all">全部订单</button>
            <button class="tab-btn" data-type="hotel">酒店订单</button>
            <button class="tab-btn" data-type="scenic">景点订单</button>
            <button class="tab-btn" data-type="ticket">车票订单</button>
        </div>

        <!-- 订单内容区域 -->
        <div class="order-content">
            <table class="table table-striped table-bordered">
                <thead>
                </thead>
                <tbody id="orderTableBody">
                </tbody>
            </table>
        </div>
    </div>`;
                    // 内容加载完成后初始化订单管理
                    setTimeout(() => {
                        if (typeof initializeOrderManagement === 'function') {
                            initializeOrderManagement();
                        }
                    }, 100);
                    break;

                default:
                    content = '<h2>欢迎来到管理系统</h2>';
            }
            document.getElementById("index-main").innerHTML = content;
            bindEvents(); // 重新绑定事件
        }
    </script>
</head>
<body>
<div class="sidebar">
    <div class="logo">
        <img src="static/img/PS2lfS0492.jpg" alt="旅游管理系统">
        <span>旅游管理</span>
    </div>

    <nav>
        <a href="/backStageManagement.jsp" id="userManagement" class="nav-item active" onclick="setActiveNavItem(this)">
            <i>👥</i>
            <span>用户管理</span>
        </a>
        <a href="/HotelReviews" id="forum" class="nav-item" onclick="setActiveNavItem(this)">
            <i>📑</i>
            <span>论坛</span>
        </a>
        <a href="/hqfSearch?pageNo=1" id="attractionManagement" class="nav-item" onclick="setActiveNavItem(this)">
            <i>🍽️</i>
            <span>景点管理</span>
        </a>
        <a href="jdshowAll" id="hotelManagement" class="nav-item" onclick="setActiveNavItem(this)">
            <i>🎁</i>
            <span>酒店管理</span>
        </a>

        <a href="http://localhost:8080/view-tickets" id="ticketManagement" class="nav-item"
           onclick="setActiveNavItem(this)">
            <i>📋</i>
            <span>车票管理</span>
        </a>
        <a href="#" id="orderManagement" class="nav-item" onclick="setActiveNavItem(this)">
            <i>📋</i>
            <span>订单管理</span>
        </a>

    </nav>
</div>

<div class="main-content">
    <header class="header">
        <h1>论坛管理</h1>
        <div class="user-menu">
            <span><% %></span>
            <a href="login.jsp" class="logout-icon">
                <i>⭕</i>
            </a>
        </div>
    </header>

    <main id="index-main" style="padding: 20px;">
        <!-- 评论表格 -->
        <div class="container" id="reviewManagementContent">
            <h2>论坛管理</h2>
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>评价</th>
                    <th>评论</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${commentsList}" var="comment">
                    <tr>
                        <td>${comment.username}</td>
                        <td>
                                ${comment.rating}
                        </td>
                        <td>${comment.comment}</td>
                        <td>
                            <img src="${comment.image}" alt="评论图片" style="max-width: 100px; max-height: 100px;">
                        </td>
                        <td><input type="button" class="delete-comment" data-comment-id="${comment.id}"  value="删除">
                    </tr>
                </c:forEach>
                </tbody>
            </table> -
            <div id="pagination">
                <c:if test="${currentNo > 1}">
                    <button class="pagination-button" data-pageno="${currentNo - 1}" onclick="change(${currentNo - 1})">上一页</button>
                </c:if>
                <c:forEach var="i" begin="1" end="${totalPages}">
                    <c:choose>
                        <c:when test="${i == currentNo}">
                            <span>${i}</span>
                        </c:when>
                        <c:otherwise>
                            <button class="pagination-button" data-pageno="${i}">${i}</button>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
                <c:if test="${currentNo < totalPages}">
                    <button class="pagination-button" data-pageno="${currentNo + 1}" onclick="chang(${currentNo + 1})">下一页</button>
                </c:if>
            </div>
        </div>


    </main>
</div>


<script type="text/javascript">


    /*点击删除按钮，根据id删除数据*/
    function deleteUserInfo(id) {
        // 确认是否删除数据

        let isDelete = confirm("是否删除数据");
        if (isDelete) {
            // 确定删除，发送ajax请求，根据id删除数据
            $.ajax({
                url: "/gyhDeleteUserInfo",
                data: {id: id},
                type: "post",
                dataType: "text",
                async: false,
                success: function (data) {
                    // 删除成功，刷新页面
                    location.reload();
                }
            })
        } else {
            alert("取消删除")
        }
    }


    /*点击修改按钮，在本页修改数据*/
    /* function updateUserInfo(id) {
         $(".modal").modal();

         let newUsername = $("#new-username").val();
         let newPassword = $("#new-password").val();
         let newIpone = $("#new-ipone").val();
         let newStatus = $("#new-status").val();
          let newUsername = prompt("请输入新的用户名");
          let newPassword = prompt("请输入新的密码");
          let newIpone = prompt("请输入新的手机号");
          let newStatus = prompt("请输入新的用户类型");
         if (newUsername !== null && newPassword !== null && newIpone !== null && newStatus !== null) {
             // 发送ajax请求，根据id修改数据
             $.ajax({
                 url: "/gyhupdateuserinfo",
                 data: {id:id,username:newUsername,password:newPassword,ipone:newIpone,status:newStatus},
                 type: "post",
                 dataType: "text",
                 async: false,
                 success: function (data) {
                     // 修改成功，刷新页面
                     location.reload();
                 }
             })
         }
     }*/







    /*点击修改按钮，在本页修改数据*/
    function updateUserInfo(id) {
        // 显示模态框
        $('#myModal').modal('show');
        // 点击保存更改按钮时触发
        $('#myModal .btn-primary').off('click').on('click', function () {
            // 获取模态框中的输入值
            let newUsername = $('#username').val();
            let newPassword = $('#password').val();
            let newPhone = $('#phone').val();
            let newUserType = $('#userType').val();

            if (newUsername === '' || newPassword === '' || newPhone === '' || newUserType === '') {
                alert('请填写完整信息');
                return;
            }
            if (newPhone.length !== 11) {
                alert("请输入正确的手机号格式");
                return;
            }

            /* 发送ajax请求，根据id修改数据*/
            $.ajax({
                url: "/gyhUpdateUserInfo",
                data: {
                    id: id,
                    username: newUsername,
                    password: newPassword,
                    phone: newPhone,
                    userType: newUserType
                },
                type: "post",
                dataType: "text",
                async: false,
                success: function (data) {
                    //判断是否保存成功
                    if (data === "success") {
                        alert("保存成功");
                    } else {
                        alert("保存失败");
                    }
                    // 修改成功，刷新页面
                    location.reload();
                },

            });

            // 关闭模态框
            $('#myModal').modal('hide');
        });
    }

    /*点击关闭按钮时触发*/
    $('#myModal .btn-secondary').off('click').on('click', function () {
        /*关闭模态框*/
        $('#myModal').modal('hide');
    });

    function bindEvents() {
        // 绑定关闭按钮事件
        $('#myModal .btn-secondary').off('click').on('click', function () {
            $('#myModal').modal('hide');
        });
    }


    /*点击添加用户按钮，触发添加用户*/
    /*   $('#myModal .btn-success').off('click').on('click', function () {

           let newUsername = $('#username').val();
           let newPassword = $('#password').val();
           let newPhone = $('#phone').val();
           let newUserType = $('#userType').val();

           if (newUsername === '' || newPassword === '' || newPhone === '' || newUserType === '') {
               alert('请填写完整信息');
               return;
           }


           $.ajax({
               url: "/GyhMsgAddUserInfo",
               data: {
                   username: newUsername,
                   password: newPassword,
                   phone: newPhone,
                   userType: newUserType
               },
               type: "post",
               dataType: "text",
               async: false,
               success: function (data) {
                   //判断是否添加成功
                   if (data === "success") {
                       alert("添加成功");
                   } else {
                       alert("添加失败");
                   }
                   // 刷新页面
                   location.reload();
               }
           })

           // 关闭模态框
           $('#myModal').modal('hide');

       })
*/


    $(document).on('click', '#myModal .btn-success', function () {

        let newUsername = $('#username').val();
        let newPassword = $('#password').val();
        let newPhone = $('#phone').val();
        let newUserType = $('#userType').val();

        if (newUsername === '' || newPassword === '' || newPhone === '' || newUserType === '') {
            alert('请填写完整信息');
            return;
        }

        if (newPhone.length !== 11) {
            alert("请输入正确的手机号格式");
            return;
        }

        $.ajax({
            url: "/GyhMsgAddUserInfo",
            data: {
                username: newUsername,
                password: newPassword,
                phone: newPhone,
                userType: newUserType
            },
            type: "post",
            dataType: "text",
            async: false,
            success: function (data) {
                if (data === "success") {
                    alert("添加成功");
                } else {
                    alert("添加失败,手机号重复");
                }
                location.reload();
            }
        });

        $('#myModal').modal('hide');
    });


     // 注下面代码为将评论的点击事件改为双击事件
    $(document).ready(function () {
        $('#forum').dblclick(function (event) {
          
            window.location.href = "/HotelReviews";
        });
    });


    function chang(a) {
        $(".pagination-button").on("click", function () {
            window.location.href = "/rty?currentNo=" + a;
        })
    }

    function change(a) {
        $(".pagination-button").on("click", function () {
            window.location.href = "/rty?currentNo=" + a;
        })
    }

    $(document).ready(function () {
        $(".delete-comment").click(function () {
            event.preventDefault();
            var commentId = $(this).data("comment-id");
            console.log(commentId);
            $.ajax({
                url: 'deleteComment',
                type: 'POST',
                dataType: 'json',
                data: {'comment-id': commentId},
                success: function (data) {
                    console.log("Response:", data); // 添加这行代码
                    try {
                        if (data.success) {
                            location.reload();
                            // 提示用户删除成功
                            alert(data.msg);
                            // 返回到主页面
                            // window.location.href = "HotelReviews.html"; // 替换为你的主页面的实际 URL
                        }
                    } catch (e) {

                    }
                },

            });
        })
    });
</script>
</body>
</html>

